<template>
	<vp-main-page @refresh="loadDataList">
		<template #actions>
			<vp-btn-add @click="handleAdd" />
		</template>
		<template #table>
			<vp-vxe-table :data="tableData" stripe border style="width: 100%" row-key="id" ref="tableRef"
				default-expand-all :tree-config="{ children: 'childrenList', rowKey: 'id' }">
				<vxe-column type="seq" align="center" title="#" width="50" tree-node />
				<vxe-column field="mc" show-overflow-tooltip>
					<template #header><vp-label zh="名称" en="Name" /></template>
				</vxe-column>
				<vxe-column field="whsj" show-overflow-tooltip>
					<template #header><vp-label zh="维护时间" en="Edit Time" /></template>
				</vxe-column>
				<vxe-column :label="$t('item.operations')" fixed="right" width="150">
					<template #header>
						<vp-label-operations />
					</template>
					<template #default="scope">
						<el-space>
							<vp-btn-add text @click="handleAdd(scope.row)" />
							<vp-btn-edit text v-if="scope.row.parentid !== '0'" @click="handleEdit(scope.row)" />
							<vp-btn-del text v-if="scope.row.parentid !== '0'" @click="handleDel(scope.row)" />
						</el-space>
					</template>
				</vxe-column>
			</vp-vxe-table>
		</template>

		<EditBase ref="editBaseRef" @formSubmited="handleFormSubmited">
		</EditBase>
	</vp-main-page>
</template>
<script setup lang="ts" name="systemBase">
import { defineAsyncComponent, onMounted, ref } from 'vue';
import VpMessageBox from '/@/components/vp/VpMessageBox';
import request from '/@/utils/request';

const EditBase = defineAsyncComponent(() => import('./component/EditBase.vue'));

const tableData = ref([]);
const loading = ref(false);

const loadDataList = () => {
	loading.value = true
	request.get('/system/base/list').then(res => {
		tableData.value = res?.data || []

		console.log(tableData.value,)
	}).finally(() => {
		loading.value = false
	})
}

onMounted(() => {
	loadDataList()
})

const editBaseRef = ref();
const handleFormSubmited = () => {
	loadDataList();
}

const handleAdd = (row: any) => {
	editBaseRef.value.handleOpen('add', row.id?row.id:"0");
}
const handleEdit = (row: any) => {
	console.log(row,"rroorr")
	editBaseRef.value.handleOpen('edit', row.fid, row.id);
}
const handleDel = (row: any) => {
	VpMessageBox.confirmDelete().then(() => {
		request.delete(`/system/base/${row.id}`).then(res => {
			loadDataList();
		})
	});

}

const tableRef = ref();

</script>
